﻿<?php
	//ob_start('compress_page');
	require_once(CONTROLLER_DIR.'/template/header_page.phtml');
	require_once('product_seo.phtml');
?>
	<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
	<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
	
</head>
<body>
	<!--<script>(function(d, s, id) {
		var js, fjs = d.getElementsByTagName(s)[0];
		if (d.getElementById(id)) return;
		js = d.createElement(s); js.id = id;
		js.src = "//connect.facebook.net/vi_VN/all.js#xfbml=1&appId=316979278390633";
		fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>-->
	
	<div id="wrapper">
		<?php	require_once(CONTROLLER_DIR.'/template/header.phtml'); ?>	
		<div id="content" > 
			<div class='product-content' >
				<div id="prod-details">
					<div id="prod-descr">
						<a><h3><?php echo $productValue['product_name'];?></h3></a>
						<p>Loại sản phẩm: <a title='<?php echo $productValue['type_name'];?>'href='<?php echo $typeURL;?>'><?php echo $productValue['type_name'];?></a></p>
						<p>Nhãn hiệu: <a><?php echo $productValue['brand_name'];?></a></p>
						
						<?php echo $productValue['product_des_short'];?><br/>
						<!--<div class="fb-like" data-send="true" data-href="<?php ProductUrl($productValue);?>" data-width="600" data-show-faces="false"></div>-->
					</div>
					<div class="product-refer" >
						<div class="rel_content" >
							<!-- artist's tools -->
							
							<?php
								foreach($referArr as $value)
								{
									if($value['product_refer_img']=='')
									{
										echo "<div class='rel_prod' >";
										echo "	<div class='rel_prod_details'>";
										echo "		<strong style='color:#000;'>{$value['product_refer_name']}</strong>";

										$price = FormatPrice($value['product_refer_price']). ' VND';
										if($value['product_refer_price_sale'] != 0)
										{
											$priceSale = FormatPrice($value['product_refer_price_sale']). ' VND';
											echo "<p>Giá: <strike>$price</strike> - Sale off: <strong style='color:#1D5A9A'>$priceSale</strong></p></div>";
										}
										else
										{
											echo "<p>Giá: <strong style='color:#1D5A9A'>$price</strong></p></div>";
										}
										echo "<div class='rel_prod_add' >";
										if(!$isPalette)
											echo"	<input type='image' name='{$value['product_refer_name']}' id='{$value['product_refer_id']}-refer'src='/img/btn_add_to_bag.gif'>";
										else
											echo "<a>Chọn màu bên dưới</a>";
										echo"	<div class='spacer'><br></div>";
										echo "</div>";
										echo "<div class='spacer'></div>";
										
										echo "</div>";
									}
								}
							?>
						</div>
					</div>
					
					<?php
						if($isPalette)
						{
							echo "<p><a>Click để chọn màu</a></p>";
					
							echo "<div class='product-palette'>";
								
								foreach($referArr as $value)
								{
									if($value['product_refer_img'])
									{
										echo "<span class='item' id='{$value['product_refer_id']}-refer'><img src='{$value['product_refer_img']}'/></span>";
									}
								}
								
							echo"<div class='spacer'></div>
							</div>";
						}
					?>
					<div id='element_to_pop_up'></div>
					<div id='cart-response'></div>
				
					<div><?php echo $productValue['product_des_full'];?></div>
				
					<!--<div style='margin-top: 10px' class="fb-comments" data-href="<?php echo ProductUrl($productValue);?>" data-num-posts="6" data-width="458px"></div>-->
					</div>
				
				<div id="prod-image-container" class="">
					<img alt='<?php echo $productValue['product_name'];?>' title='<?php echo $productValue['product_name'];?>' id="prod-image" class="prod-image-medium" src="<?php echo $productValue['product_img1'];?>">
					<ul class="gallery clearfix">
						<?php 
						foreach ($photoArr as $value)
						{
							if($value)
							{
								echo "<li>";
								echo "<a href='$value' rel='prettyPhoto[pp_gal]'>
										<img src='$value' width='45' height='45'>
									</a>";
								echo "</li>";
							}
						}
						?>
						
						<div class='spacer'></div>
					</ul> 
					<!--<div style='margin-top:15px' class="fb-like-box" data-href="http://www.facebook.com/makeupvacosi" data-width="250" data-height="365" data-show-faces="true" data-stream="false" data-header="true"></div>-->
				</div>
				<div class='spacer'></div>
				
				
			</div>
			
			<div class="spacer"></div>
		</div><!--id: content-->
		<?php require_once(CONTROLLER_DIR.'/template/poster/poster.php'); ?>	
		<?php require_once(CONTROLLER_DIR.'/template/footer.phtml'); ?>	
	</div><!--id: wrapper-->
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>

<script>
	var posX, posY;
	$(document).ready(function()
	{
		//$.fx.off = true;
		$('.bClose').live('click', function(e)
		{
			e.preventDefault();
			$('#element_to_pop_up').hide();
			$('#cart-response').hide();
		});
		
		$('.item').live('click', function(e)
		{
			e.preventDefault();
			$('#element_to_pop_up').hide();
			$('#cart-response').hide();
			
			var id = parseInt($(this).attr('id'));
			
			var getURL = 'ajax/product_refer.php?id='+id;
					
			$.get(getURL, function(data) 
			{
				$('#element_to_pop_up').html(data)
			});
			
			pos= $(this).position();
			
			$("#element_to_pop_up").css(
			{
				position: "absolute",
				top: (pos.top -230) + "px",
				left: pos.left + "px"
			}).show('fast');
		}); 
		
		$('input').live('click', function(e)
		{
			e.preventDefault();
			posX = e.pageX;
			posY = e.pageY;
			
			var referName = $(this).attr('name');
			var referId = parseInt($(this).attr('id'));
			
			onAddCart(referId, referName);
		});
		
	});
	function onAddCart(id,referName)
	{
		$('#element_to_pop_up').hide();
		var getURL = 'ajax/cart.php?action=add&id='+id+'&name='+referName;
		
		$.get(getURL, function(data) 
		{
			//alert(pos.top);
			$('#cart-response').html(data)
			
			$("#cart-response").css(
			{
				position: "absolute",
				top: (posY - 50) + "px",
				left: posX + "px"
			}).show('fast');
		});
	}
</script>
</body>
</html>
<?php	
	/*  end the buffer, echo the page content  */
	//ob_end_flush();
?>	
